<%--
  Created by IntelliJ IDEA.
  User: 86132
  Date: 2022/10/30
  Time: 21:29
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
%>
<html>
<head>
    <base href="<%= basePath%>">
    <script src="js/jquery-3.6.0.min.js"></script>
    <title>WorkBenchIndex</title>
</head>
<script type="text/javascript">
    $(function () {
    //    给登出添加单机事件
        $("#logoutDiv").click(function (){
            var confirmLogout=confirm("确定退出吗?")
            if (confirmLogout == false){
                return;
            }
            window.location.href="settings/qx/user/logout.do"
        })
        //页面加载完毕 自动局部刷新middle下部分到首页
        $("#homeDiv").click()
    })
</script>
<style>
    body{
        margin: 0;
        padding: 0;
        border: 0;
    }
    #top{
        width: 100%;
        height: 10%;
        background: #d7ffd5;
    }
    #left{
        margin-left: 10%;
        width: 10%;
        height: 90%;
        background: #e4ffe2;
    }
    #middle{
        margin-left: 10%;
        top: 10%;
        position: absolute;
        left: 10%;
        width: 60%;
        background: #fbffdb;
        height: 90%;
    }
    #right{
        position: absolute;
        background: #e4ffe2;
        top: 10%;
        left: 80%;
        width: 10%;
        height: 90%;
    }
    #userLoginInfo{
        position: absolute;
        right: 15%;
        height: fit-content;
        top: 20px;
        width: fit-content;
        display: flex;
    }
    #userSpan{
        margin-top: 10px;
        margin-bottom: 10px;
        cursor: pointer;
    }
    #index-friendTalkDiv{
        border-bottom-style: none;
    }
    .menu{
        overflow: hidden;
        position: relative;
        text-align: center;
        position: relative;
    }
    .menu:hover{
        overflow: visible;
        cursor: pointer;
        z-index: 999;
    }
    .userDropDiv{
        margin-right: 5px;
        display: inline-block;
    }
    .userDropDiv:hover{
        cursor: pointer;
        z-index: 999;
    }
    .left{
        text-align: center;
        border-bottom-style: solid;
        width: 100%;
        height: fit-content;
        margin-bottom: 16px;
        padding-bottom: 5px;
    }

</style>
<body>
<div id="top">
    <div id="userLoginInfo" class="menu">
        <div>
            <span  id="userHeadSpan">头像</span>
            <span class="userDropDiv" id="userSpan" >${sessionScope.sessionUser.userName}</span>
            <div class="userDropDiv">个人中心</div>
            <div class="userDropDiv">收到的评论</div>
            <div class="userDropDiv" id="logoutDiv">登出</div>
        </div>
    </div>
</div>
<div id="left">
    <a href="workbench/main/home.do" target="mainFrame"><div class="left" id="homeDiv">首页</div></a>
    <a href="workbench/main/friendList.do" target="mainFrame"><div class="left" id="index-friendListDiv">好友列表</div></a>
    <a href="workbench/main/myTalk.do" target="mainFrame"><div class="left" id="index-myTalkDiv">我的说说</div></a>
    <a href="workbench/main/friendTalk.do" target="mainFrame"><div class="left" id="index-friendTalkDiv">好友说说</div></a>
</div>
<div id="middle">
    <iframe style="border-width: 0px; width: 100%; height: 100%;" name="mainFrame"></iframe>
</div>
<div id="right"></div>
</body>
</html>
